<template>
  <div class="me-update">
    <u-form ref="uFormRef" :model="designerUser" :label-width="216">
      <u-form-item label="头像" right-icon="arrow-right">
        <view class="pictrue" @tap="bindChooseImage">
          <div class="pictrue">
            <img class="avatar" :src="designerUser.avatar" />
          </div>
        </view>
      </u-form-item>
      <u-form-item label="账号">
        <u-input v-model="designerUser.uid" input-align="right" :clearable="false" :disabled="true" />
      </u-form-item>
      <u-form-item label="昵称" right-icon="arrow-right">
        <u-input v-model="designerUser.nickname" input-align="right" :clearable="false" />
      </u-form-item>
      <u-form-item label="性别" right-icon="arrow-right">
        <!--        <u-input v-model="designerUser.sex" input-align="right" type="select" @click="sexShow = true" :clearable="false" />-->
        <div style="margin-left: auto; text-align: right" @click="sexShow = true">{{ designerUser.sex == 0 ? '男' : designerUser.sex == 1 ? '女' : '保密' }}</div>
        <u-action-sheet v-model="sexShow" :list="actionSheetList" @click="actionSheetCallback"></u-action-sheet>
      </u-form-item>
      <u-form-item label="身高" right-icon="arrow-right">
        <u-input v-model="designerUser.height" input-align="right" :clearable="false" type="digit" />
      </u-form-item>
      <u-form-item label="体重(范围)" right-icon="arrow-right">
        <u-input v-model="designerUser.weight" input-align="right" :clearable="false" type="digit" />
      </u-form-item>
      <u-form-item label="脚尺寸" right-icon="arrow-right">
        <u-input v-model="designerUser.footSize" input-align="right" :clearable="false" type="digit" />
      </u-form-item>
      <u-form-item label="个人简介">
        <div class="introduction">
          <u-input v-model="designerUser.introduction" input-align="left" type="textarea" :clearable="false" :maxlength="120" />
          <div class="num">{{ designerUser.introduction?.length || 0 }}/120</div>
        </div>
      </u-form-item>
    </u-form>

    <div class="btns">
      <div class="btn is-success" @click="bindSave">保存</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { getDesignUser } from '@/api/designUser';
import { chooseImage } from '@/utils/tool';
import { postUserEdit } from '@/api/user';
import { useRouter } from 'uni-mini-router';

const uFormRef = ref();
const router = useRouter();

const actionSheetList = ref<Array<{ text: string }>>([{ text: '女' }, { text: '男' }, { text: '保密' }]);
const sexShow = ref(false);

const designerUser = ref({
  account: '',
  addIp: '',
  addres: '',
  adminid: 0,
  avatar: '',
  birthday: 0,
  brokeragePrice: 0,
  checkStatus: true,
  couponCount: 0,
  footSize: '',
  height: '',
  integral: 0,
  introduction: '',
  isDaySign: true,
  isPromoter: 0,
  isYesterDaySign: true,
  lastIp: '',
  level: 0,
  loginType: '',
  mark: '',
  nickname: '',
  nowMoney: 0,
  payCount: 0,
  phone: '',
  points: 0,
  realName: '',
  sex: 2,
  signNum: 0,
  spreadCount: 0,
  spreadUid: 0,
  statu: 0,
  status: true,
  sumSignDay: 0,
  uid: 0,
  userType: '',
  username: '',
  vip: true,
  vipIcon: '',
  vipId: 0,
  vipName: '',
  weight: '',
});
// 定义事件处理函数
const actionSheetCallback = (index: number) => {
  designerUser.value.sex = index;
};
const bindChooseImage = () => {
  chooseImage((img) => {
    designerUser.value.avatar = img;
  });
};

const bindSave = () => {
  console.log('保存', designerUser.value);
  uni.showLoading({ title: '保存中...' });
  postUserEdit(designerUser.value)
    .then((res) => {
      uni.showToast({
        title: '保存成功',
        icon: 'none',
      });
      try {
        router.back(1);
      } catch (e) {
        router.replaceAll({ path: '/pages/me/index' });
      }
    })
    .finally(() => {
      uni.hideLoading();
    });
};

onShow(() => {
  queryDesignUser();
});

function queryDesignUser() {
  getDesignUser().then((res) => {
    console.log('res', { res });
    designerUser.value = res.data;
  });
}
</script>

<style lang="scss" scoped>
.me-update {
  padding: 16rpx 16rpx 300rpx;
}
.pictrue {
  width: 92rpx;
  height: 92rpx;
  border-radius: 58rpx 58rpx 58rpx 58rpx;
  margin-left: auto;
  .avatar {
    width: 92rpx;
    height: 92rpx;
    border-radius: 58rpx 58rpx 58rpx 58rpx;
  }
}

.introduction {
  background: #f3f7f8;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  padding: 16rpx;
  .num {
    font-weight: 400;
    font-size: 20rpx;
    color: #6f6f6f;
    line-height: 28rpx;
    text-align: right;
  }
}

.btns {
  width: 100vw;
  position: fixed;
  bottom: 0px;
  left: 0;
  height: 168rpx;
  background: #ffffff;
  box-shadow: 0rpx -2rpx 4rpx 2rpx rgba(9, 9, 9, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16rpx;
  padding: 0 32rpx;

  .btn {
    width: 240rpx;
    height: 72rpx;
    background: #f3f7f8;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #6f6f6f;
    line-height: 72rpx;
    text-align: center;

    &.is-success {
      width: 100%;
      background: linear-gradient(90deg, #f32f1a 0%, #f68a2d 100%);
      color: #ffffff;
    }
  }
}
</style>
